<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>12-循环改变文字颜色并计算数字的和</title>
    <style>
		div{
			line-height:30px;
		}
		div span{
			width:20px;
			height:20px;
			line-height:20px;
			text-align:center;
			color:#fff;
			background:#000;
			border-radius:2px;
			display: inline-block;
		}
    </style>
	<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
</head>
<body>
    <div>百度<span>9</span></div>
    <div>新浪<span>7</span></div>
    <div>阿里<span>5</span></div>
	<p class="sum">0</p>
	<script type="text/javascript">
		$(function(){
			//先造个数组
			var arr = ['red','blue','orange'];
			//定义一个变量接收
			var sum = 0;
			//遍历节点
			$.each($('div'),function(index,eleDom){
				console.log(index);//索引
				console.log(eleDom);//原生DOM,不能使用Jquery的方法的
				//eleDom.css('color','red');//eleDom.css is not a function
				//需要将原生DOM对象转换为Jquery元素对象
				$(eleDom).css('color',arr[index]);
				
				sum+= parseFloat($(eleDom).find('span').text());
			});
			$('.sum').text(sum).css('color','blue');
		});
	</script>
</body>

</html>